<template>
  <div class="monitor-info-panel">
    <infoBasicMachine ref="InfoBasicMachineRef"></infoBasicMachine>
    <infoLog ref="InfoLogRef"></infoLog>
    <infoBasicSentinel ref="InfoBasicSentinelRef"></infoBasicSentinel>
    <infoAlert ref="InfoAlertRef"></infoAlert>
    <infoButtons ref="InfoButtonsRef"></infoButtons>
    <infoFramework></infoFramework>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import infoBasicMachine from './InfoBasic.vue';
import infoButtons from './InfoButtons.vue';
import infoFramework from './InfoFramework.vue';
import infoLog from "../log/InfoLog.vue";
import infoBasicSentinel from '../sentinel/InfoBasic.vue';
import infoAlert from "./alert/InfoAlert.vue";

const InfoButtonsRef = ref();

const InfoBasicMachineRef = ref();
const InfoLogRef = ref();
const InfoBasicSentinelRef = ref();
const InfoAlertRef = ref();

const reload = () => {
  nextTick(() => {
    InfoBasicMachineRef?.value?.reload();
    InfoLogRef?.value?.reload();
    InfoBasicSentinelRef?.value?.reload();
    InfoAlertRef?.value?.reload();
  })
}

// onMounted(() => {
// })

defineExpose({
  reload,
});
</script>

<style scoped lang="scss">
.monitor-info-panel {
  @include box(600px, 100%);
  @include flex(column, flex-start, center);
  background-color: rgba(0, 0, 0, 0);
  overflow-y: scroll;
  // padding: 10px 15px 0 15px;
  padding: 15px;

  &>div {
    margin-top: 15px;
  }

  &>div:first-child {
    margin-top: 0px;
  }
}
</style>